<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>vue案例</title>
    <link rel="stylesheet" href="css/index.css">
  </head>
  <body >
    <!-- 原地址：https://www.tuicool.com/articles/AveiIzF -->
  <div id="test">
    <!-- 开场小动画  -->
      <h1 class="title">{{text}}</h1>
    <!-- 导航滑块 start -->
    <div class="nav" @mouseleave.stop="navIndex = 0">
      <ul>
        <li v-for="(item, index) in navdatas" @mouseenter.stop="getIndex(index)"><span>{{item}}</span></li>
      </ul>
      <div class="slider" :style="{'transform': 'translate3d('+navIndex*100+'px, 0, 0)'}"></div>
    </div>
    <!-- 导航滑块 end -->
  </div>
    <script src="js/vue.js"></script>
    <script src="app/app.js"></script>
  </body>
</html>
